<template>
  <el-dialog :title="title" v-model="dialogVisible" width="600px">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="120px"
    >
      <el-form-item label="所属区域" prop="menuIdList">
        <AreaSelect v-model:data="ruleForm.areaCode" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, watch, computed, ref } from "vue";
import { orgRelativeMenu } from "@/api/system";
import useEditDialog from "@/hooks/useEditDialog";
import AreaSelect from "@/components/AreaSelect/";
export default defineComponent({
  name: "EditDialog",
  emits: ["submit"],
  components: { AreaSelect },
  setup(props, { emit }) {
    const DEFAULT_FORM = {
      menuIdList: [], // 组织列表
    };

    const rules = computed(() => {
      const baseRules = {
        // 表单校验规则
        orgId: [{ required: true, message: "请选择所属区域" }],
      };
      return baseRules;
    });

    const {
      dialogVisible,
      title,
      ruleForm,
      ruleFormRef,
      open,
      close,
    } = useEditDialog({
      createApi: orgRelativeMenu,
      editApi: orgRelativeMenu,
      defaultForm: DEFAULT_FORM,
      emit,
    });
    const handleSubmit = () => {
      emit('submit', ruleForm.value)
      close()
    }

    watch(dialogVisible, () => {
      if (dialogVisible.value) {

      }
    });


    return {
      ruleFormRef,
      ruleForm,
      rules,
      dialogVisible,
      title,
      open,
      close,
      handleSubmit,
    };
  },
});
</script>
